<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/lightbox.css">
</head>

<body>

  <h2>第一组图片：不能左右切换</h2>
  <div id="lightbox_1">
    <img src="images/2-1.png" alt="#" class="lightbox-pic" data-role="lightbox" data-source="images/2-1.png"
      data-group="group-2" data-id="pic_2_1" data-caption="pic_2_1">
    <img src="images/2-2.png" alt="#" class="lightbox-pic" data-role="lightbox" data-source="images/2-2.png"
      data-group="group-2" data-id="pic_2_2" data-caption="pic_2_2">
    <img src="images/2-3.png" alt="#" class="lightbox-pic" data-role="lightbox" data-source="images/2-3.png"
      data-group="group-2" data-id="pic_2_3" data-caption="pic_2_3">
  </div>
  <h2>第二组图片: 能左右切换</h2>
  <div id="lightbox_2">
    <img src="images/1-1.png" alt="#" class="lightbox-pic" data-role="lightbox" data-source="images/1-1.png"
      data-group="group-1" data-id="pic_1_1" data-caption="这是第1张图">
    <img src="images/1-2.png" alt="#" class="lightbox-pic" data-role="lightbox" data-source="images/1-2.png"
      data-group="group-1" data-id="pic_1_2" data-caption="这是第2张图">
    <img src="images/1-3.png" alt="#" class="lightbox-pic" data-role="lightbox" data-source="images/1-3.png"
      data-group="group-1" data-id="pic_1_3" data-caption="这是第3张图">
    <img src="images/1-4.png" alt="#" class="lightbox-pic" data-role="lightbox" data-source="images/1-4.png"
      data-group="group-1" data-id="pic_1_4" data-caption="这是第4张图">
  </div>

  <div id="lightbox_mask"></div>
  <div id="lightbox_popup">
    <div class="pic-view">
      <img src="images/1-2.png" alt="#" class="pic">
    </div>
    <div class="btn-view">
      <a href="#" class="btn btn-prev">←</a>
      <a href="#" class="btn btn-next">→</a>
      <a href="#" class="btn btn-close">×</a>
    </div>
    <div class="caption-view">
      <p>pic1</p>
    </div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/lightbox.js"></script>
  <script>
    $(function () {

      $('#lightbox_2').lightbox({
        ifChange: true
      });

      $('#lightbox_1').lightbox();

    });
  </script>

</body>

</html>